<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .container {
        width: 1000px;
        height: 550px;
        margin: 100px auto;
        font-size: 0;
        background-color: rgb(255, 250, 250);
        .left-img {
          display: inline-block;
          width: 475px;
          height: 450px;
          background-image: url("./images/imgA_2.jpg");
          background-repeat: no-repeat;
          background-position: center;
          position: relative;
          margin-right: 50px;
          .mask {
            opacity: 0;
            position: absolute;
            width: 230px;
            height: 230px;
            background-image: url("./images/0050b917760d557daf9a5fe8444724e.png");
          }
        }
        .right-img {
          display: inline-block;
          width: 475px;
          height: 450px;
          background-image: url("./images/imgA_3.jpg");
          background-repeat: no-repeat;
          opacity: 0;
        }
        .img-list-wrapper {
          width: 475px;
          height: 100px;
          text-align: center;
          .img-list {
            li {
              display: inline-block;
              width: 60px;
              height: 60px;
              margin: 0 5px;
              background-image: url("./images/imgA_1.jpg");
              /* border: 2px solid darkgray; */
            }
          }
        }
      }
    </style>
  </head>
  <body>
    <!-- 最外层容器 -->
    <div class="container">
      <!-- 左侧原图 -->
      <div class="left-img">
        <!-- 遮罩图 -->
        <div class="mask"></div>
      </div>
      <!-- 右侧大图 -->
      <div class="right-img"></div>
      <!-- 缩略图 -->
      <div class="img-list-wrapper">
        <ul class="img-list">
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </body>
  <script>
    window.onload = function () {
      // 图片数据
      var imgs = {
        sm: ["imgA_1.jpg", "imgB_1.jpg", "imgC_1.jpg"],
        md: ["imgA_2.jpg", "imgB_2.jpg", "imgC_2.jpg"],
        lg: ["imgA_3.jpg", "imgB_3.jpg", "imgC_3.jpg"],
      };
      // DOM查询工具函数封装
      function $(selector) {
        return document.querySelector(selector);
      }
      function $$(selector) {
        return document.querySelectorAll(selector);
      }

      // 获取需要用到的DOM对象
      var container = $(".container");
      var leftImg = $(".left-img");
      var mask = $(".mask");
      var rightImg = $(".right-img");
      var imgListWrapper = $(".img-list-wrapper");
      var imgList = $(".img-list");
      // 默认显示所有缩略图
      var str = "";
      for (var i = 0; i < imgs.sm.length; i++) {
        var item = imgs.sm[i];
        str += ` <li style="background-image:url('./images/${item}')"></li>`;
      }
      imgList.innerHTML = str;
      //   默认第一个缩略图高亮
      imgList.children[0].style.border = "2px solid rgb(0, 0, 0)";
      //   给每个缩略图绑定点击事件
      imgList.addEventListener("click", function (e) {
        if (e.target.tagName.toUpperCase() === "LI") {
          // 排他思想
          var lis = $$("li");
          //
          for (var i = 0; i < lis.length; i++) {
            // 把所有li边框清除
            lis[i].style.border = "none";
          }
          // 给点击的标签添加边框
          e.target.style.border = "2px solid rgb(0, 0, 0)";

          // 点击缩略图，上面的切换图片
          // 找到当前图片的索引
          var index = 0;
          for (var i = 0; i < lis.length; i++) {
            if (lis[i].style.border === "2px solid rgb(0, 0, 0)") {
              index = i;
            }
          }
          // 通过缩略图的当前索引给左图和右图设置指定的背景图
          leftImg.style.backgroundImage = `url('./images/${imgs.md[index]}')`;
          rightImg.style.backgroundImage = `url('./images/${imgs.lg[index]}')`;
        }
      });
      // 监听图片上的鼠标移动事件
      leftImg.onmousemove = function (e) {
        mask.style.opacity = 1;
        rightImg.style.opacity = 1;

        // 根据鼠标位置计算遮罩的left和top
        //e.clientX 和 e.clientY： 鼠标事件e的客户端X和Y坐标
        // leftImg.offsetLeft 和 leftImg.offsetTop：leftImg元素的左边缘和顶部边缘到其最近的定位祖先元素左上角的距离
        var left = e.clientX - leftImg.offsetLeft - mask.offsetWidth / 2;
        var top = e.clientY - leftImg.offsetTop - mask.offsetHeight / 2;
        console.log(left, top);
        // 给遮罩限定范围
        if (left <= 0) {
          left = 0;
        }
        if (top <= 0) {
          top = 0;
        }
        if (left >= leftImg.offsetWidth - mask.offsetWidth) {
          left = leftImg.offsetWidth - mask.offsetWidth;
        }
        if (top >= leftImg.offsetHeight - mask.offsetHeight) {
          top = leftImg.offsetHeight - mask.offsetHeight;
        }

        // 根据left和top实时修改遮罩的位置
        mask.style.left = left + "px";
        mask.style.top = top + "px";
        // 根据left和top修改右侧大图的位置

        rightImg.style.backgroundPositionX = -left + "px";
        rightImg.style.backgroundPositionY = -top + "px";
      };
      // 监听左侧图片上鼠标移出时间
      leftImg.onmouseleave = function (e) {
        mask.style.opacity = 0;
        rightImg.style.opacity = 0;
      };
    };
  </script>
</html>
